<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>查询探头最新数据</title>

    <!-- Bootstrap -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/css/updata.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">最新温湿度记录表</div>
    <div class="panel-body">
        <p>默认刷新时间：5 minute</p>
    </div>

    <!-- Table -->
    <table class="table">
        <thead>
        <tr>
            <td>探头编号</td>
            <td>温度</td>
            <td>湿度</td>
            <td>最后探测时间</td>
        </tr>
        </thead>
        <tbody  id="tb1">

        </tbody>
    </table>
</div>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="/assets/js/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="/assets/js/bootstrap.min.js"></script>
   <script>
       $(function () {
           setInterval(loadData, 1000);
       })
       function loadData() {
           var url = "updata";
           $.getJSON(url,{},function (rs) {
               var trs = '';
               for(i = 0; i < rs.length; i ++){
                   var s = rs[i];
                   trs += '<tr><td>' + s.code
                       + '</td><td>' + s.name
                       + '</td><td>' + s.price
                       + '</td></tr>';
               }
               $('#tb1').innerHTML = trs;

           });
       }

   </script>

</body>
</html>